<template>
  <div class="home-cooking-container">
    <NavBaRCom :title="'家常菜'"></NavBaRCom>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list :immediate-check="false" v-model="loading" offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <DailyRecommendation
          v-for="item in homeCookingList"
          :key="item.id"
          :recommendInfo="item"
          :image="item.imageid"
          :likeNum="item.likeCount"
          :collectionNum="item.collectCount"
          :title="item.name"
          :desc="item.description"
          :userImage="item.authorimageid"
          :userName="item.authorname"
        ></DailyRecommendation>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavBaRCom from '@/components/home-navbar-view/NavBaRCom'
import DailyRecommendation from '@/components/home-view/DailyRecommendation'
import request from '@/utils/request/request'
export default {
  name: 'home-cooking',
  components: {
    NavBaRCom,
    DailyRecommendation
  },
  data() {
    return {
      id: 7136536,
      page: 0,
      top: 0,
      homeCookingList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  methods: {
    //下拉刷新
    onRefresh() {
      this.page = 0
      this.homeCookingList = []
      this.requestHomeCooking()
    },
    //滚动加载
    async onLoad() {
      this.requestHomeCooking()
    },
    // 请求数据
    async requestHomeCooking() {
      /*
      请求地址：http://120.55.28.235/public/getContentsBySubClassid.shtml
      请求方式：post
      请求参数：{
        id: 7136536,
        page: 0      翻页数据，每次加1
      }
      */
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const {
        data: { list: res }
      } = await request({
        url: '/public/getContentsBySubClassid.shtml',
        method: 'post',
        data: {
          id: this.id,
          page: this.page
        }
      })
      toast.clear()
      if (res.length > 0) {
        res.forEach((item) => {
          this.homeCookingList.push(item)
        })
        this.loading = false
        this.page++
      } else {
        this.$toast.success('已经全部加载')
        this.finished = true
      }
      this.isLoading = false
    }
  },
  created() {
    if (sessionStorage.getItem('cooking-data')) {
      let cookingData = JSON.parse(sessionStorage.getItem('cooking-data'))
      this.id = cookingData.id
      this.homeCookingList = cookingData.homeCookingList
      this.top = cookingData.top
      this.page = cookingData.page
      return
    }
    this.requestHomeCooking()
  },
  mounted() {
    window.scrollTo(0, this.top)
    document.addEventListener('scroll', () => {
      this.top = window.pageYOffset
    })
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('cooking-data')
    })
  },
  beforeDestroy() {
    // 需要保存的数据
    let obj = {
      top: this.top,
      id: this.id,
      page: this.page,
      homeCookingList: this.homeCookingList
    }
    sessionStorage.setItem('cooking-data', JSON.stringify(obj))
  }
}
</script>

<style lang="less" scoped>
.home-cooking-container {
  padding-top: 46px;
  /deep/.van-icon {
    color: #323232;
  }
}
</style>
